<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-3.6.0.min.js">		
		</script>
		<script src="js/bootstrap.min.js">
		</script>
		<style type="text/css">
			.container{
				display: flex;
				justify-content: center;
			}
		</style>
	</head>
	<body>
<div class="container">
	<div id="left">
	<form>
	  <div class="form">
	    <label for="bookname">书名：</label>
	    <input type="text" class="form-control" id="bookname">
	  </div>
	  <div class="form">
	    <label for="number">编号:</label>
	    <input type="text" class="form-control" id="number">
	  </div>
	  <div class="form">
	    <label for="price">价格:</label>
	    <input type="number" min="0" max="150" step="0.5" class="form-control" id="price">
	  </div>
	  <fieldset class="form-group row">
	    <legend class="col-form-label col-sm-2 float-sm-left pt-0">类型</legend>
	    <div class="col-sm-10">
	      <div class="form-check">
	        <input class="form-check-input" type="radio" name="type" id="gridRadios1" value="xuanhuan" checked>
	        <label class="form-check-label" for="gridRadios1">
	          	玄幻
	        </label>
	      </div>
	      <div class="form-check">
	        <input class="form-check-input" type="radio" name="type" id="gridRadios2" value="wuxia">
	        <label class="form-check-label" for="gridRadios2">
	          	武侠
	        </label>
	      </div>
	      <div class="form-check">
	        <input class="form-check-input" type="radio" name="type" id="gridRadios3" value="jingdian">
	        <label class="form-check-label" for="gridRadios4">
	         	 经典
	        </label>
	      </div>
	      <div class="form-check">
	        <input class="form-check-input" type="radio" name="type" id="gridRadios4" value="qita">
	        <label class="form-check-label" for="gridRadios4">
	         	 其他
	        </label>
	      </div>
	      <div class="button">
			  <button type="submit" class="btn btn-primary 1">新增</button>
			  <button type="update" class="btn btn-primary 2">更新</button>
		  </div>	
  		</fieldset>
</div>
<div class="right">
	<table class="table table-hover">
		<thead>
			<tr>
			    <th scope="col">#</th>
			    <th scope="col">书名</th>
			    <th scope="col">编号</th>
			    <th scope="col">价格</th>
			    <th scope="col">类型</th>
			    <th scope="col">操作栏</th>
		    </tr>
		  </thead>
		  <tbody></tbody>
		</table>
	</div>
</div>
</body>
</html>
